<template>
  <view>
    <scroll-view
      scroll-with-animation
      :scroll-left="scrollLeft"
      scroll-x
      class="y-sliding-line"
    >
      <view class="y-sliding-line-content">
        <view
          @click="selecrCurrently(item, index)"
          ref="y-sliding-line"
          :class="{ 'y-sliding-line-content-active': currentIndex === index }"
          class="y-sliding-line-content-item"
          v-for="(item, index) of list"
          :key="index"
        >
          {{ item.label }}
        </view>
        <view
          :style="style"
          class="y-sliding-line-content-sliding"
        ></view>
      </view> 
      </scroll-view>
  </view>
</template>

<script>
export default {
  name: "y-sliding-line",
  props: {
    currentIndex: {
      type: Number,
      default: 0,
    },
    leftX: {
      type: Number,
      default: 0,
    },
    windowWidth: {
      type: Number,
      default: 0,
    },
    options: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      widthList: [],
    };
  },
  computed: {
    list() {
      return this.options.list;
    },
    isFixedWidth() {
      return this.options.isFixedWidth || "auto";
    },
    allQueryOptions() {
      let len = this.widthList.length;
      if (!len || this.currentIndex + 1 > len) return {};
      let selectList = this.widthList.slice(0, this.currentIndex + 1);
      let left = selectList.reduce((c, n) => {
        c += n.attribute.width;
        return c;
      }, 0);
      let lastWith = selectList[selectList.length - 1].attribute.width;
      return {
        len,
        left,
        lastWith,
      };
    },
    style() {
      // 获取当前选择tab和之前的宽度
      let { len, left, lastWith } = this.allQueryOptions;
      if (!len || this.currentIndex + 1 > len) return;
      return {
        width: lastWith * 0.7 + "px",
        left: left - lastWith + lastWith * 0.15 + "px",
      };
    },
    scrollLeft() {
      if (!this.style) return 0;
      let { len, left, lastWith } = this.allQueryOptions;
      return left - (this.windowWidth + lastWith) / 2;
    },
  },
  watch: {
    list() {
      this.getListWidthAll();
    },
  },
  methods: {
    // 初始化及每次list发生改变的时候重新去获取所有list的宽度,减少调用次数
    getListWidthAll() {
      let list = this.$refs["y-sliding-line"];
      let widthList = list.map((item, index) => ({
        attribute: item.$el.getBoundingClientRect(),
        index,
      }));
      this.widthList = widthList;
    },
    selecrCurrently(item, index) {
      this.$emit("update:currentIndex", index);
      this.$emit("change", {
        index,
        item,
      });
    },
  },
  mounted() {
    this.getListWidthAll();
  },
};
</script>

<style lang="scss" scoped>
.y-sliding-line {
  width: 100%;
  padding: 10upx 0;
  background-image: linear-gradient(
    180deg,
    $y-theme-color,
    rgb(255, 255, 255)
  );
  font-size: 30upx;
  &-content {
    width: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 20upx 0;
    position: relative;
    &-item {
      padding: 0 10upx;
      color: rgba(255, 255, 255, 0.7);
    }
    &-active {
      color: #fff;
    }
    &-sliding {
      height: 4upx;
      background-color: #fff;
      position: absolute;
      bottom: 5upx;
      transition: all 0.3s;
    }
  }
}
</style>